使用 JavaScript 阻止屏幕进入睡眠状态

您所在的位置:网站首页 edge s 锁屏 使用 JavaScript 阻止屏幕进入睡眠状态

使用 JavaScript 阻止屏幕进入睡眠状态

2024-01-22 06:45| 来源: 网络整理| 查看: 265

使用 JavaScript 阻止屏幕进入睡眠状态

最近在 H5 端有需要保持手机屏幕常亮的需求,辗转之下,发现了一个早在 chrome 85 中就已经支持的 Web API,不过,截止到今天发文时,Safari 仍不支持,尽管如此,在安卓端我们还是能调用这个 API 来节省设备电池电量(相对于 NoSleep.js 来说),ios 端使用 polyfill 的方式,在将来 Safari 支持该 API 后移除即可。

Wake Lock 可防止屏幕关闭、变暗或锁定,仅适用于活动的选项卡/窗口,这可以防止后台选项卡使您的设备保持唤醒状态,也提供了函数以随时通过代码手动释放。

调用 Wake Lock 之前,我们首先需要检查当前浏览器中是否存在该功能。我们可以使用以下简单函数来做到这一点。

const canWakeLock = () => 'wakeLock' in navigator; 请求唤醒锁

下面的示例演示如何请求 WakeLockSentinel 对象。WakeLock.request 方法是基于 Promise 的,因此我们可以创建一个异步函数。

let wakeLock = null;const requestWakeLock = async ()=>{ try { wakeLock = await navigator.wakeLock.request('screen'); console.log('Wake Lock is active!'); } catch (err) { console.log(`${err.name}, ${err.message}`); } } requestWakeLock() 释放唤醒锁

下面的示例演示如何释放以前获取的唤醒锁。

wakeLock.release().then(() => wakeLock = null); 侦听唤醒锁释放

如因任何原因(例如离开活动窗口/选项卡)而释放唤醒锁,将出触发 release 监听函数。 

wakeLock.addEventListener('release', () => { console.log('Wake Lock has been released'); }); 重新获取唤醒锁

以下代码在文档的可见性发生更改并释放唤醒锁时重新获取唤醒锁。

document.addEventListener('visibilitychange', async () => { if (wakeLock !== null && document.visibilityState === 'visible') { requestWakeLock() } });

转载:使用 JavaScript 阻止屏幕进入睡眠状态

微信交流群

前端面试:剑指 Offer (3群)



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3